import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gameplay_flutter/lib_runtime/extension/string_extension/string_text.dart';
import 'package:gameplay_flutter/lib_runtime/extension/widget/widget_wrapper.dart';
import 'package:provider/provider.dart';

import '../../lib_baseview/lib_baseview.dart';
import '../../lib_baseview/utils/constant/app_colors.dart';
import '../../lib_baseview/widget/appbar/custom_app_bar.dart';
import '../../lib_baseview/widget/web/common_web_view.dart';
import '../../lib_network/old/url_config.dart';
import '../../lib_runtime/web_url_const.dart';
import '../../resource/language/generated/l10n.dart';
import 'veri_code_model.dart';
import 'veri_input_code_widget.dart';

///
/// 验证码输入框
///
class VeriCodePage extends StatefulWidget {
  /// 手机号
  final String phoneNum;

  /// 区号
  final String areaCode;

  const VeriCodePage(
      {super.key, required this.phoneNum, required this.areaCode});

  @override
  State<VeriCodePage> createState() => _VeriCodePageState();
}

class _VeriCodePageState extends State<VeriCodePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
            create: (_) => VeriCodeModel(widget.phoneNum, widget.areaCode)),
      ],
      child: Container(
        color: Colors.white,
        child: Stack(
          children: [
            image(
              'login/login_with_phone_bg.png',
              width: ScreenUtil().screenWidth,
              height: 184.h,
              fit: BoxFit.fitWidth,
            ),
            Scaffold(
              resizeToAvoidBottomInset: false,
              backgroundColor: Colors.transparent,
              appBar: CustomAppBar(),
              body: Container(
                width: ScreenUtil().screenWidth,
                color: Colors.transparent,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    T.current.login_input_veri.text(
                        color: AppColors.COLOR_1B1B1B,
                        fontSize: 24,
                        weight: TextFontWeight.medium),
                    SizedBox(
                      height: 8.h,
                    ),
                    '${T.current.login_send_veri} ${widget.phoneNum}'.text(
                        color: AppColors.COLOR_A8A8A8,
                        fontSize: 11,
                        weight: TextFontWeight.regular,
                        maxLines: 2,
                        maxWidth: ScreenUtil().screenWidth - 20 * 2),
                    Consumer<VeriCodeModel>(builder: (context, model, _) {
                      return VeriInputCodeWidget(
                        count: 4,
                        // phone: widget.phoneNum,
                        code: model.inputCodeStr,
                        onRestart: () async {
                          model.reloadVeriCode();

                          return true;
                        },
                        onResult: (code) {
                          // 获取当前输入验证码长度
                          final codeLength = code.length;
                          // 判断是否满足条件（4位验证码）
                          final isEnabled = codeLength == 4;

                          if (isEnabled) {
                            // 让当前焦点范围内的组件失去焦点
                            FocusScope.of(context).unfocus();

                            model.loginAction(context, code);
                          }
                        },
                      ).paddingSymmetric(horizontal: 10);
                    }),
                    const Spacer(),
                    Container(
                      padding: const EdgeInsets.only(bottom: 80),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            color: const Color(0xFFE4E4E4),
                            height: 0.5,
                            width: 60,
                          ),
                          T.current.login_vft_code_was_rcd
                              .text(
                                  color: const Color(0xFFD8D8D8),
                                  fontSize: 12,
                                  weight: TextFontWeight.medium)
                              .padding(top: 5, bottom: 5)
                              .onTap(() {
                            // 让当前焦点范围内的组件失去焦点
                            FocusScope.of(context).unfocus();

                            String url =
                                '${UrlConfig.pageDomain}${WebUrlConst.encounteringProblems.path}';

                            CommonWebView.show(context, url, title: '登录问题');
                          }),
                          Container(
                            color: Color(0xFFE4E4E4),
                            height: 0.5,
                            width: 60,
                          ),
                        ],
                      ),
                    )
                  ],
                ).paddingSymmetric(horizontal: 20.w),
              ),
            )
          ],
        ),
      ).onTap(() {
        // print("cdddddd");

        // _ctrl.focusNode.
        FocusScope.of(context).unfocus();
      }),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}
